<template>
  <div>
    <PlainCreateBtn :show-icon="false" @click="openDialog">设置默认值</PlainCreateBtn>
    <el-dialog
      :visible.sync="dialogFormVisible"
      :close-on-click-modal="false"
      :append-to-body="true"
      class="medium-common-dialog-size subform-default-dialog"
      @close="closeDialog">
      <Title :title="selectWidget.name" style="margin-bottom: 12px;" />
      <RichEditor v-if="cloneElement && isRichEditor" v-model="cloneElement.value" />
      <div class="btn">
        <el-button type="primary" size="small" @click="toSubmit()">保存</el-button>
        <el-button type="info" size="small" class="cancel-btn-style" @click="closeDialog">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Title from '@/components/Title';
import RichEditor from '@/components/Editor/RichEditor';
export default {
  components: { RichEditor, Title },
  model: {
    prop: 'selectWidget',
    event: 'changeData'
  },
  props: {
    selectWidget: {
      type: Object,
      default: () => ({})
    },
    widgetData: {
      type: Object,
      default: () => {
        return {
          list: [],
          config: {
            labelWidth: 100, labelPosition: 'right',
            keyToFormula: {} // 公式字段的映射表（被引用的字段: 引用它的公式字段）
          }
        };
      }
    }
  },
  data() {
    return {
      dialogFormVisible: false,
      isRichEditor: false,
      cloneElement: null
    };
  },
  methods: {
    toSubmit() {
      this.closeDialog();
      this.$set(this.selectWidget, 'value', this.cloneElement.value);
    },
    closeDialog() {
      this.dialogFormVisible = false;
      // setTimeout(() => { // 解决弹窗闪烁问题
      //   this.isRichEditor = false;
      // }, 1000);
    },
    openDialog() {
      this.cloneElement = _.cloneDeep(this.selectWidget);
      this.isRichEditor = true;
      this.dialogFormVisible = true;
    }
  }
};
</script>

<style lang="scss" scoped>
.btn {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
</style>
<style lang="scss">
.subform-default-dialog {
  .el-dialog__body {
    padding: 16px 24px !important;
  }
}
</style>
